<template lang="html">
  <div>
    <div class="nav">
      我的等级:<span>白丁</span>(10/20)
    </div>
    <div class="den">
    <div class="den-1">
      <button>最近阅读</button>
      <button>我的收藏</button>
      <button>我的订阅</button>
    </div>
    您还没有阅读记录哟！
    </div>
    <div class="con-tou">
      <span>今日人气小说推荐</span>
    </div>
    <ul class="con-di">
      <li><span>古代</span> | 长生歌</li>
      <li><span>玄幻</span> | 美女图</li>
      <li><span>耽美</span> | 你,皮肤很白</li>
      <li><span>耽美</span> | 霸道总裁极品爱</li>
      <li><span>仙侠</span> | 至尊逍遥仙</li>
      <li><span>都市</span> | 特种教官</li>
    </ul>
    <div class="sou">
      <input type="text" name="" value="" placeholder="网络真儿真儿是极卡的">
      <img src="../../static/fang.png" alt="">
      <button type="button" name="button">搜索</button>
    </div>
    <div class="footer">
      <ul class="u1">
        <li>首页</li>
        <li>书架</li>
        <li>分类</li>
        <li>留言</li>
        <li>充值</li>
        <li>客户端</li>
      </ul>
      <ul class="u2">
        <li>普通版</li>
        <div></div>
        <li><span>触平版</span></li>
      </ul>
      <p><span>看书网</span> wap.kanshu.com</p>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.nav{
  width:95%;
  height:50px;
  margin:15px auto;
  line-height: 50px;
  background: white;
  span{
    color:#E98110;
  }
}
.den{
  width:95%;
  margin:15px auto;
  padding:5px 5px 20px;
  background: white;
  .den-1{
    width:95%;
    height: 40px;
    margin:0 auto 10px;
    display: flex;
    justify-content: space-between;
    button{
      width: 33.33%;
      height:40px;
      border:1px solid #CCC;
    }
  }
}
.con-tou {
    width: 95%;
    height: 30px;
    margin: 20px auto 0;
    padding: 0 10px;
    line-height: 30px;
    background: white;
    span {
        font-size: 17px;
    }
}
.con-di {
    width: 95%;
    margin: 0 auto;
    background: white;
    padding-bottom: 20px;
    li {
        width: 95%;
        margin: 0 auto;
        padding-left: 10px;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px dashed lightgrey;
        span {
            color: #E98110;
        }
    }
}
.footer{
  width: 100%;
  background: #333333;
  color:#CCCCCC;
  .u1{
    width: 80%;
    margin:0 auto;
    height:40px;
    line-height: 40px;
    display: flex;
    justify-content: space-around;
  }
  .u2{
    width: 50%;
    margin:0 auto;
    height:30px;
    display: flex;
    justify-content: space-around;
    div{
      width:1px;
      margin-top:8px;
      height:15px;
      background: #CCC;
    }
    li{
      width: 30%;
      height:30px;
      text-align: center;
      line-height: 30px;
      span{
        color:#E98110;
      }
    }
  }
  p{
    width: 100%;
    text-align: center;
    height: 40px;
    line-height: 40px;
    span{
      color:#E98110;
    }
  }
}
.sou {
    width: 95%;
    height: 40px;
    margin: 10px auto 20px;
    position: relative;
    display: flex;
    justify-content: space-between;
    border: 1px solid #E98110;
    background: white;
    padding: 0 0 0 10px;
    input {
        outline: medium;
        border-style: none;
        width: 75%;
        height: 35px;
    }
    button {
        width: 25%;
        height: 38px;
        text-align: right;
        padding-right: 15px;
        background: #EEEE;
        border: 1px solid #EEE;
        color: #E98110;
    }
    img {
        position: absolute;
        left: 78%;
    }
}
</style>
